<script setup lang="ts">
const route = useRoute()
const menus = useMenuData()
const title = ref()
const keywords = ref()

watch(() => route, (val) => {
  menus.value.forEach((menu) => {
    if (val.path.includes(menu.route)) {
      title.value = menu.title
      keywords.value = `中瑞集团 - ${menu.title}，中瑞，中瑞文化，中瑞集团，福建中瑞集团，福州中瑞，中瑞文化发展，文化科技，综合福利，产业投资，最美电影，最美影视，中瑞心选，欢银电影，米奇微影，嘿影，高新技术，中瑞剧坊，中瑞影城`
      if (val.path !== '/')
        title.value = `中瑞集团 - ${menu.title}`

      useHead({
        title,
        meta: [
          { name: 'keywords', content: keywords.value },
          { name: 'description', content: '中瑞文化发展集团致力于文化科技产业投资建设的大型文化产业互联网科技集团。目前已逐步形成文化科技板块、福利营销板块、文化投资板块的产业布局，积极拓展全国大文娱市场，秉承“引领文化产业科技创新”的宗旨，助力国家、地方文化科技产业的蓬勃发展。' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0' },
        ],
      })
    }
  })
}, { immediate: true, deep: true })
</script>

<template>
  <div class="layout-wrap">
    <Header />
    <div class="slot">
      <slot />
    </div>
    <Footer />
    <Copyright />
    <n-back-top :right="50" />
  </div>
</template>

<style lang="scss" scoped>
.slot {
  position: relative;
  margin-top: 110px;
}
</style>
